{% extends 'base.html' %}
{% block title %}Brispon{% endblock %}
{% block stylesheet %}
{{ block.super }}
<style type="text/css">
#map_canvas {
    width: 600px;
    height: 400px;
}
</style>
{% endblock%}

{% block javascript %}
{{ block.super }}
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="{% url base_static "js/jquery.fn.gmap.js" %}"></script>
<script type="text/javascript">
$(function() {
    $('#map_canvas').gmap({'zoom':11, 'center': '-27.48147, 153.03612' }).bind('init', function(event, map) { 
                    
        //var bounds = map.getBounds();
        //var southWest = bounds.getSouthWest();
        //var northEast = bounds.getNorthEast();
        //var lngSpan = northEast.lng() - southWest.lng();
        //var latSpan = northEast.lat() - southWest.lat();
        
        var bounds = map.getBounds();
        var southWest = new google.maps.LatLng(-27.61480, 153.21533);
        var northEast = new google.maps.LatLng(-27.37847, 152.80815);
        var lngSpan = northEast.lng() - southWest.lng();
        var latSpan = northEast.lat() - southWest.lat();
        
        
        var images = [];
        images.push("http://google-maps-icons.googlecode.com/files/friends.png");
        images.push("http://google-maps-icons.googlecode.com/files/home.png");
        images.push("http://google-maps-icons.googlecode.com/files/girlfriend.png");
        images.push("http://google-maps-icons.googlecode.com/files/dates.png");
        images.push("http://google-maps-icons.googlecode.com/files/realestate.png");
        images.push("http://google-maps-icons.googlecode.com/files/apartment.png");
        images.push("http://google-maps-icons.googlecode.com/files/family.png");
        
        var tags = [];
        {% for c in categories %}
        tags.push("{{ c.1 }}");
        {% endfor %}
        
        var options = '<option value="all">All</option>';
        $.each(tags, function(i, tag) {
            options += '<option value="'+ tag + '">' + tag + '</option>';
        });
        $('#tags').append(options);
        
        {% for s in stores %}
        var opts = {'id': 'm_' + '{{ forloop.counter0 }}',
                    'icon': images[(Math.floor(Math.random()*7))],
                    'tags': '{{s.get_category_display}}',
                    'bound':true, 
                    'position': new google.maps.LatLng({{ s.y }}, {{ s.x }})
                    };
                    
        $('#map_canvas').gmap('addMarker', opts ).click(function() {
            $('#map_canvas').gmap('openInfoWindow', { 'content': '<h3><a href="{{ s.url }}">{{ s.name }}</a></h3><p>Address : {{ s.addr }}</p><p>Tel : {{ s.tel }}</p>' }, this);
        });
        {% endfor%}

        $('#map_canvas').gmap('addControl', 'tags-control', google.maps.ControlPosition.TOP_LEFT);
    
        $("#tags").change(function() {
            var bounds = new google.maps.LatLngBounds();
            var tag = $(this).val();
            if ( tag == 'all' ) {
                $('#map_canvas').gmap('findMarker', 'tags', tag, false, function(marker, found) {
                    marker.setVisible(true); 
                    bounds.extend(marker.position);
                    marker.map.fitBounds(bounds);   
                });
            } else {
                $('#map_canvas').gmap('findMarker', 'tags', tag, ',', function(marker, found) {
                    if (found) {
                        marker.setVisible(true); 
                        bounds.extend(marker.position);
                        marker.map.fitBounds(bounds);
                    } else { 
                        marker.setVisible(false); 
                    }
                });
            }
        });
    
    });

});
</script>
{% endblock%}

{% block content %}
<p>


<form method="post" action="">
{% csrf_token %}
  {{ form.name }}
  {{ form.category }}
</form>
</p>
<div id="map_canvas"></div>

<div id="tags-control" class="item gradient ui-corner-all shadow-all" style="margin:5px;padding:5px 5px 5px 10px;">
  <select id="tags" style="outline:none;"></select>
</div>

<hr>
<div>
  <table class="zebra-striped">
  <thead>
    <tr>
      <th>Store</th>
      <th>Category</th>
    </tr>
  </thead>
  <tbody>
  {% for store in stores %}
  <tr>
  	<td><a class="btn" href="#">dd</a><img src="{{ store.logo }}" width="100" height="100" /><a href="{{ store.url }}">{{ store.name }}</a></td>
  	<td>{{ store.get_category_display }}</td>
  </tr>
  {% endfor%}
  </tbody>
  </table>
</div>
      
{% endblock %}
